// =========
// submenu
// =========
@import "base.less";

@esui-submenu-min-width: 12em;
@esui-submenu-padding: 0.2em 0;
@esui-submenu-border: none;
@esui-submenu-separator-border: 1px solid #ddd;
@esui-submenu-background: #EFF0F2;
@esui-submenu-zindex: 1000;

@esui-submenu-item-color: #444;
@esui-submenu-item-hover-color: #444;
@esui-submenu-item-text-size: 1em;
@esui-submenu-item-highlight-background: #FEF8E9;
@esui-submenu-item-padding: 0.5em 1em;

.@{ui-class-prefix}-submenu {
    position: absolute;
    z-index: @esui-submenu-zindex;
    overflow: visible;
    padding: 0;
    margin: 0;
    list-style: none;
    background: @esui-submenu-background;
    border: @esui-submenu-border;
    padding: @esui-submenu-padding;
    min-width: @esui-submenu-min-width;

    > li {
        // IE8 doesn't show respect to li:hover
        // thus we add one :first-child to make hover work.
        > :first-child {
            cursor: pointer;
            display: block;
            .esui-transition(background-color 0.3s ease);
            padding: @esui-submenu-item-padding;
            color: @esui-submenu-item-color;
            text-decoration: none !important;
            white-space: nowrap;
        }
        &:hover {
            > :first-child {
                color: @esui-submenu-item-hover-color;
                background: @esui-submenu-item-highlight-background;
            }
            > .@{ui-class-prefix}-submenu {
                display: block;
            }
        }
        // for sub menu.
        position: relative;
        > .@{ui-class-prefix}-submenu {
            display: none;
        }
    }
}

.@{ui-class-prefix}-submenu-fill-width {
    min-width: 100%;
}

.@{ui-class-prefix}-submenu-fly-out-top {
    bottom: 100%;
}

.@{ui-class-prefix}-submenu-align-right {
    right: 0;
}

.@{ui-class-prefix}-submenu-fly-out-left {
    top: 0;
    left: -100%;
}

.@{ui-class-prefix}-submenu-fly-out-right {
    top: 0;
    left: 100%;
}

.@{ui-class-prefix}-submenu-separator-top {
    border-top: @esui-submenu-separator-border;
}

.@{ui-class-prefix}-submenu-separator-bottom {
    border-bottom: @esui-submenu-separator-border;
}

.esui-submenu-variant(
    @background,
    @border,
    @separator-border,
    @text-color,
    @text-hover-color,
    @hightlight-color,
    @submenu-padding: @esui-submenu-padding,
    @submenu-item-padding: @esui-submenu-item-padding
) {
    padding: @submenu-padding;
    background: @background;
    border: @border;
    > li > :first-child {
        color: @text-color;
        padding: @submenu-item-padding;
        white-space: nowrap;
    }
    > li:hover > :first-child {
        color: @text-hover-color;
        background: @hightlight-color;
    }
    .@{ui-class-prefix}-submenu-separator-top {
        border-top: @separator-border;
    }
    .@{ui-class-prefix}-submenu-separator-bottom {
        border-bottom: @separator-border;
    }
}